<template>
  <div class="inven-component">
    <el-card class="box-card">
<!--      选择在售商品-->
      <el-form :inline="true" :model="goodInvenObj" class="demo-form-inline">
        <el-form-item label="商品id">
          <el-input v-model="goodInvenObj.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input v-model="goodInvenObj.name" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sellingGoodsDialogVisible = true">选择商品</el-button>
        </el-form-item>
      </el-form>
<!--      当前商品各分类的库存量的折线统计图-->
      <div class="inven-chart" ref="InvenChart"></div>
    </el-card>
    <el-card class="box-card">
<!--      可编辑库存区域-->
      <div>
        <span>库存调节</span>
        <el-row :gutter="20">
          <el-col :span="goodInvenList.length >= 3 ? 8 : 24 / goodInvenList.length" v-for="item in goodInvenList" :key="item.invenid">
            <div class="grid-content bg-purple">
              <el-tag>{{ item.choicename }}</el-tag>
              <el-input-number v-model="item.headroom" :controls="false" @change="editInven(item)"></el-input-number>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
<!--    选择商品的Dialog对话框-->
    <el-dialog title="在售商品列表" :visible.sync="sellingGoodsDialogVisible">
<!--      分页模块-->
      <el-pagination
        :page-size="4"
        layout="prev, pager, next"
        :total="sellingGoodsList.length"
        @current-change="changePageNum">
      </el-pagination>
      <el-table :data="readyToRenderGoodsList">
        <el-table-column property="goodsid" label="商品id" width="80"></el-table-column>
        <el-table-column property="goodsname" label="商品名" min-width="350"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button @click="chosenCurrentChoice(scope.row)" aria-rowindex="80">确定</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Inventory',
  created() {
    this.getMerchantSellingGoods()
  },
  data() {
    return {
      // 存储当前商品的属性选项值列表
      goodInvenList: [],
      // 当前正在查看的商品属性选项值库存的商品信息
      goodInvenObj: {
        id: '',
        name: ''
      },
      // 控制展示商家售卖的商品信息对话框是否可见
      sellingGoodsDialogVisible: false,
      // 渲染至dialog弹出框的商品信息列表
      readyToRenderGoodsList: []
    }
  },
  computed: {
    ...mapState(['sellingGoodsList'])
  },
  methods: {
    ...mapMutations(['setSellingGoodsList']),
    async getMerchantSellingGoods() {
      if (this.sellingGoodsList.length > 0) {
        this.readyToRenderGoodsList = this.sellingGoodsList.slice(0, 4)
        return this.showDefaultInven()
      }
      console.log('发起远程请求商品数据 库存页')
      if (!sessionStorage.getItem('id')) return this.$message.error('状态异常')
      const { data: res } = await this.$http.get('/merchant/goods', {
        params: {
          id: sessionStorage.getItem('id')
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取商品信息失败')
      this.setSellingGoodsList(res.recordset)
      this.readyToRenderGoodsList = this.sellingGoodsList.slice(0, 4)
      this.showDefaultInven()
    },
    // 获取当前商品的库存信息
    async getCurrentGoodInven(id) {
      const { data: res } = await this.$http.get('/merchant/goodinven', {
        params: {
          id
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取此商品库存信息失败')
      this.goodInvenList = res.recordset
      const xData = this.goodInvenList.map(item => item.choicename)
      const yData = this.goodInvenList.map(item => item.headroom)
      this.renderInvenChart(xData, yData)
    },
    // 渲染商品库存的折线图
    renderInvenChart(xAxisData, yAxisData) {
      echarts.init(this.$refs.InvenChart).setOption({
        color: ['skyblue', '#5470c6', '#61a0a8'],
        title: {
          text: '商品库存图',
          left: '50%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            rotate: -10
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxisData,
            type: 'bar'
          }
        ]
      })
    },
    // 表格中的确定按钮被点击时 保存用户点击的商品信息
    chosenCurrentChoice(good) {
      this.goodInvenObj.id = good.goodsid
      this.goodInvenObj.name = good.goodsname
      this.sellingGoodsDialogVisible = false
      this.getCurrentGoodInven(this.goodInvenObj.id)
    },
    // 默认展示店铺第一个商品库存信息
    showDefaultInven() {
      this.goodInvenObj.id = this.sellingGoodsList[0].goodsid
      this.goodInvenObj.name = this.sellingGoodsList[0].goodsname
      this.getCurrentGoodInven(this.goodInvenObj.id)
    },
    // 当计数框内数字发生改变时触发 修改当前项的库存量
    async editInven(inven) {
      const { data: res } = await this.$http.put('/merchant/modifyinven', {
        id: inven.invenid,
        num: inven.headroom
      })
      if (res.meta.status !== 200) return this.$message.error('修改库存失败')
      this.$message.success('修改库存量成功')
      this.getCurrentGoodInven(this.goodInvenObj.id)
    },
    // dialog对话框中分页模块当前页数发生改变时触发
    changePageNum(currentPage) {
      this.currentPageNum = currentPage
      this.readyToRenderGoodsList = this.sellingGoodsList.slice((this.currentPageNum - 1) * 4, this.currentPageNum * 4)
    }
  }
}
</script>

<style scoped>
.inven-chart {
  height: 400px;
}

.el-col {
  margin-top: 15px;
}

.el-input-number {
  margin-left: 20px;
}

.el-form--inline .el-form-item:nth-child(2) .el-input {
  width: 1000px;
}
</style>
